<meta charset="utf-8">
	<style>
	div,ul,li{margin: 0;padding: 0;}
	.publish{width: 100%;height: 100%;}
	.publish li{list-style:none;width: 49%;height: 150px;float: left;font-family: "微软雅黑";}
	.publish li .pic{ width: 82%;height: 135px;margin: 0px auto;position: relative;border-radius: 100%;}
	.publish li i.zt{font-size: 40px;color: #fff;text-align: center;position: absolute;left: 50%;margin-left: -20px;top: 45%;margin-top: -20px;}
	.publish li .tit{text-align: center;display: block;font-size: 12px;position: relative;top: 65%;font-family: "微软雅黑"; color: white;}
	
	.publish li:nth-child(1) .pic{background: #b0ecf7;}
	.publish li:nth-child(2) .pic{background: #fdb0c8;width: 65%;height: 110px;top: 10%;}
	.publish li:nth-child(3) .pic{background: #fadb74;width: 65%;height: 110px;top: 10%;}
	.publish li:nth-child(4) .pic{background: #acf5a3;}
	.publish li:nth-child(5) .pic{background: #9d9fae;}
	.publish li:nth-child(6) .pic{background: #fbd2b7;width: 65%;height: 110px;top: 10%;}
	
	/*清浮动*/
	.clearfix:after{content:"";display:block;clear:both;}
	.clearfix{zoom:1;}

@-webkit-keyframes shake {
     0%{
        -webkit-transform:translate(0px,0px);
    }
    25%{
        -webkit-transform:translate(-4px, 0px);
    }
    50%{
        -webkit-transform:translate(0px, -4px);
    }
    75%{
        -webkit-transform:translate(4px, 0px);
    }
    100%{
        -webkit-transform:translate(0px,0px);
    }
}
@keyframes shake {
      0%{
        transform:translate(0px,0px);
    }
    25%{
        transform:translate(-4px, 0px);
    }
    50%{
      transform:translate(0px, -4px);
    }
    75%{
       transform:translate(4px, 0px);
    }
    100%{
       transform:translate(0px,0px);
    }
}

.shake{
    -webkit-animation:shake 8s infinite;
    animation:shake 8s infinite;
}
.a1
{
	animation:myfirst .5s;
	-webkit-animation:myfirst .5s; /* Safari and Chrome */
}
.a2
{
	animation:myfirst 1s;
	-webkit-animation:myfirst 1s; /* Safari and Chrome */
}
.a3
{
	animation:myfirst 1.5s;
	-webkit-animation:myfirst 1.5s; /* Safari and Chrome */
}
.a4
{
	animation:myfirst 2s;
	-webkit-animation:myfirst 2s; /* Safari and Chrome */
}
.a5
{
	animation:myfirst 2.5s;
	-webkit-animation:myfirst 2.5s; /* Safari and Chrome */
}
.a6
{
	animation:myfirst 3s;
	-webkit-animation:myfirst 3s; /* Safari and Chrome */
}
@keyframes myfirst
{
	0%   { left:0px; margin-top:1000px;}
	100% {left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px;margin-top:1000px;}

	100% { left:0px; top:0px;}
}

</style>
<script type="text/javascript">
var s=0;
	setTimeout('aa()',1000);
	function aa()
	{
		setTimeout('aa()',1000);
		s++;
			//alert(s);
		$('.a'+s).attr("class","shake");
	}
  </script>

<ion-view view-title="发布" cache-view="false"  hide-back-button="true">

<div class="content has-header">
		
		 <div class="publish clearfix">
		    	<ul class="clearfix">
		    		<li class="a1">
		    			<a href="#/tab/publish/自定义主题">
		    			<div class="pic">
		    				<i class="iconfont icon-tubiao zt"></i>
		    				<p class="tit">自定义主题</p>
		    			</div></a>
		    		</li>
		    		<li class="a2 ">
		    			<div class="pic">
		    				<i class="iconfont icon-tubiao zt"></i>
		    				<p class="tit">亲子互动</p>
		    			</div>
		    		</li>
		    		<li class="a3 ">
		    			<div class="pic">
		    				<i class="iconfont icon-tubiao zt"></i>
		    				<p class="tit">图书</p>
		    			</div>
		    		</li>
		    		<li class="a4 ">
		    			<div class="pic">
		    				<i class="iconfont icon-tubiao zt"></i>
		    				<p class="tit">旅游</p>
		    			</div>
		    		</li >
		    		<li class="a5">
		    			<div class="pic">
		    				<i class="iconfont icon-tubiao zt"></i>
		    				<p class="tit">户外运动</p>
		    			</div>
		    		</li>
		    		<li class="a6">
		    			<div class="pic">
		    				<i class="iconfont icon-tubiao zt"></i>
		    				<p class="tit">少年宫</p>
		    			</div>
		    		</li>
	
		    	</ul>
		    </div>

  </div>
</ion-view>
